<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			#header {
				width: 1190px;
				height: 40px;
				padding: 22px 0px;
				/*border: 1px solid;*/
				margin: auto;
			}
			
			#header img {
				width: 190px;
				margin-top: 8px;
			}
			
			#content {
				width: 100%;
				background-color: rgb(217, 61, 0);
			}
			
			.content_fi {
				position: relative;
				width: 1190px;
				margin: auto;
			}
			
			.content_se {
				position: absolute;
				top: 91px;
				right: 60px;
				background: #fff;
				/*padding: 25px 26px 20px;*/
				width: 350px;
				height: 404px;
			}
			
			.content_see {
				width: 298px;
				height: 257px;
				/*border: 1px solid;*/
				margin-top: 50px;
				margin-left: 25px;
				position: relative;
				display: none;
			}
			
			.content_see input {
				margin-left: 20px;
				border: 0px solid;
			}
			
			.content_see p {
				margin-bottom: 25px;
				width: 295px;
				height: 40px;
				border: 1px solid #CCCCCC;
			}
			
			.content_th {
				margin-bottom: 25px;
				height: 18px;
				line-height: 18px;
				font-size: 16px;
				color: #3c3c3c;
				font-weight: 700;
			}
			
			.content_thh {
				width: 295px;
				height: 40px;
				background-color: #ff0036;
				text-align: center;
				line-height: 40px;
				font-size: 16px;
				font-weight: 700;
				color: #fff;
				cursor: pointer;
			}
			
			.content_fo {
				position: absolute;
				right: 0px;
				margin-top: 15px;
			}
			
			.content_fo a {
				color: #6c6c6c;
				font-size: 12px;
				margin-left: 10px;
				text-decoration: none;
			}
			
			.content_cv {
				position: relative;
			}
			
			.img2 {
				position: absolute;
				top: -45px;
				right: 30px;
			}
			
			.img1 {
				transform: translate(90deg);
				position: absolute;
				right: -20px;
				top: -45px;
			}
			
			.content_ten {
				width: 298px;
				height: 257px;
				/*border: 1px solid;*/
				margin-top: 50px;
				margin-left: 25px;
				position: relative;
			}
			
			.content_ten_se {
				height: 18px;
				line-height: 18px;
				font-size: 16px;
				color: #3c3c3c;
				font-weight: 700;
			}
			
			.content_ten_th {
				margin-top: 20px;
				text-align: center;
			}
			
			.content_ed {
				margin-top: 10px;
				color: #999999;
				display: flex;
				justify-content: center;
				font-size: 12px;
			}
			
			.content_ed a {
				color: red;
				margin: 0px 5px;
				text-decoration: none;
			}
			
			#footer {
				width: 100%;
				margin-top: 40px;
				/*text-align: center;*/
				background: #fff;
				position: relative;
				vertical-align: middle;
			}
			
			.footer_fi {
				width: 1190px;
				height: 135px;
				/*border: 1px solid;*/
				margin: auto;
				line-height: 25px;
			}
			
			.footer_fi_fi a {
				display: inline-block;
				color: #000;
				font-size: 12px;
				margin-right: 10px;
				text-decoration: none;
			}
			
			.footer_fi_fi a:hover {
				text-decoration: underline;
			}
			
			.footer_se {
				line-height: 25px;
				font-size: 12px;
			}
			
			.footer_se a {
				text-decoration: none;
				color: #999;
				margin-right: 50px;
			}
			
			.footer_se a:hover {
				text-decoration: underline;
			}
		</style>
		<title></title>
	</head>

	<body>
		<div id="login">
			<div id="header"><img src="img/01.png"></div>
			<div id="content">
				<div class="content_fi" title="618图书文教狂欢放送">
					<img src="img/02.jpg">
					<div class="content_se">

						<div class="content_see">
							<div class="content_cv"><img class="img2" src="img/2017-06-02_094631.png"><img class="img1" src="img/06.png"></div>
							<div class="content_th">密码登录</div>
							<p><img align="center" src="img/2017-06-02_090802.png"><input type="text" placeholder="会员名/手机号/邮箱"></p>
							<p><img align="center" src="img/2017-06-02_090856.png"><input type="text"></p>
							<div class="content_thh">登录</div>
							<div class="content_fo">
								<a href="#">忘记密码</a>
								<a href="#">免费注册</a>
							</div>
						</div>
						<div class="content_ten">
							<div class="content_cv"><img class="img2" src="img/2017-06-02_105523.png"><img class="img1" src="img/2017-06-02_105629.png"></div>
							<div class="content_ten_se">手机扫码，安全登录</div>
							<div class="content_ten_th">

								<img class="content_img" src="img/10.png" data-src="img/2017-06-02_134446.png">

								<div class="content_ed">
									<p><img src="img/2017-06-02_104016.png"></p>
									<p>打开
										<a href="#">手机天猫</a><span>|</span>
										<a href="#">手机淘宝</a><br />扫一扫登录</p>
								</div>
							</div>
							<div class="content_fo">
								<a href="#">忘记密码</a>
								<a href="#">免费注册</a>
							</div>
						</div>
					</div>
				</div>

			</div>
			<!--<div id="footer">
				<div class="footer_fi">
					<p class="footer_fi_fi">
						<a href="#">关于天猫</a>
						<a href="#">帮助中心</a>
						<a href="#">开放平台</a>
						<a href="#">诚聘英才</a>
						<a href="#">联系我们</a>
						<a href="#">网站合作</a>
						<a href="#">法律声明及隐私权政策</a>
						<a href="#">知识产权</a>
						<a href="#">廉政举报</a>
					</p>
					<p class="footer_fi_fi">
						<a href="#">阿里巴巴集团</a>
						<a href="#">淘宝网</a>
						<a href="#">天猫</a>
						<a href="#">聚划算</a>
						<a href="#">全球速卖通</a>
						<a href="#">阿里巴巴国际交易市场</a>
						<a href="#">1688</a>
						<a href="#">阿里妈妈</a>
						<a href="#">飞猪</a>
						<a href="#">阿里云计算</a>
						<a href="#">yunso</a>
						<a href="#">阿里通信</a>
						<a href="#">万网</a>
						<a href="#">高德</a>
						<a href="#">UC</a>
						<a href="#">友盟</a>
						<a href="#">虾米</a>
						<a href="#">阿里星球</a>
						<a href="#">来往</a>
						<a href="#">钉钉</a>
						<a href="#">支付宝</a>
					</p>
					<div class="footer_se">
						<p>
							<span>增值电信业务经营许可证：</span>
							<a href="#">浙B2-20110446</a>
							<span>网络文化经营许可证：</span>
							<a href="#">浙网文[2015]0295-065号</a>
							<a href="#">12318举报</a>
						</p>
						<p><span>互联网药品信息服务资质证书编号：</span>
							<a href="#">浙-（经营性）-2017-0005</a>
							<a href="#"><img src="img/03.png">浙公网安备 33010002000120号</a>

						</p>
						<p>© 2003-2017 TMALL.COM 版权所有</p>
					</div>
				</div>
			</div>-->
		</div>
		<script type="text/javascript" src="../common/js/jQuery- 2.2.3.min.js"></script>
		<script>
			$(function() {
				$(".img1").click(function() {
					var display = $(".content_see").css("display");
					if(display == "none") {
						$(".content_see").show();
						$(".content_ten").hide();
					} else {
						$(".content_see").hide();
						$(".content_ten").show();

					}
				})
				var data = $(".content_img").attr("data-src");
				setTimeout(function() {
					$(".content_img").attr("src", data)
				}, 3000)
			})
		</script>
	</body>

</html>